<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format'
import Platform from '@/common/components/platform-avatar/index.vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <a class="page-home-recommend-organization block" :href="props.data.jump" target="_blank">
    <div class="border-b-1 border-hex-fafafa border-solid py-16">
      <h3 class="line-clamp-1 w-744px flex items-center">
        <span v-if="props.data.isSelected" class="mr-8 mt-1 inline-block h-22 rounded-4 bg-[#feefde] px-6 text-12 text-[#FC8B06] font-400 leading-22">{{ $t('home.home.template3.prime') }}</span>
        <span class="truncate text-16 color-hex-292929 font-500 leading-24" :title="props.data.name">{{ props.data.name }}</span>
        <Platform class="ml-4 shrink-0" :platform="props.data.platform" icon-class="size-16" tooltip />
      </h3>

      <p class="line-clamp-1 mt-4 break-anywhere text-14px color-hex-575757 font-400 leading-22">{{ props.data.description ? props.data.description : $t('home.home.recommend.organization.empty') }}</p>

      <div class="mt-8 flex-y-center justify-between">
        <div class="text-12 text-hex-adadad font-400 leading-20">
          <span>{{ $t('home.home.template3.type2') }}</span>
        </div>
        <div class="flex-y-center gap-24">
          <div class="flex-y-center gap-4 text-12 color-hex-575757 font-400">
            <div class="i-icons:repository size-16"></div>
            <div class="h-16">{{ formatNumber(props.data.projectNum) }}</div>
          </div>
          <div class="flex-y-center gap-4 text-12 color-hex-575757 font-400">
            <div class="i-icons:member size-16"></div>
            <div class="h-16">{{ formatNumber(props.data.memberNum) }}</div>
          </div>
          <div v-if="props.data.link" class="flex-y-center gap-4 text-12 color-hex-575757 font-400">
            <div class="i-icons:link size-16"></div>
            <div class="h-16">{{ props.data.link }}</div>
          </div>
        </div>
      </div>
    </div>
  </a>
</template>

<style lang="scss" scoped>
</style>
